<template>
    <div class="output_log">
        <Table
                border
                stripe
                height="150"
                size="small"
                :columns="tableTitle" :data="operationLog"></Table>
        <div class="output_log-tag">日志</div>
    </div>
</template>

<script>
  import {Table} from 'view-design';
  import {mapState} from 'vuex';

  export default {
    name: "IndexOutputLog",
    components: {Table,},
    data() {
      return {
        tableTitle: [{
          title: '时间',
          key: 'time',
          resizable: true,
          width: 180
        },
          {
            title: '用户',
            key: 'user',
            resizable: true,
            width: 180
          },
          {
            title: '操作',
            key: 'operation',
            resizable: true,
          }],
      }
    },
    computed: {
      ...mapState([
        "operationLog"
               ]),
    },
  }
</script>

<style scoped lang="scss">
    .output_log {
        position: relative;
        height: 30%;
        overflow: scroll;
        width: 100%;

        .output_log-tag {
            position: absolute;
            bottom: 0;
            left: 0;
            display: flex;
            padding: 2px;
            margin-left: 6px;
            justify-content: flex-start;
            align-items: center;
            -webkit-box-shadow: inset 0 1px 0 0 #fff;
            -moz-box-shadow: inset 0 1px 0 0 #fff;
            box-shadow: inset 0 1px 0 0 #fff;
            background-color: #f5f5f5;
            background-image: linear-gradient(to bottom, #f5f5f5, #eee);
            border: 1px solid #aaaaaa;
            z-index: 200;
        }
    }

</style>
